/* eslint-disable @typescript-eslint/no-unused-vars */
import { DatePicker } from "antd"
import { RangePickerProps } from "antd/es/date-picker"
import dayjs, { Dayjs } from "dayjs"
import { FC } from "react"

import { SFormItem } from "@/components/common"
import { useLocale } from "@/locales"
// import { IUpdateTimeRangeProps } from "./types"

const { RangePicker } = DatePicker

const disabledDate: RangePickerProps["disabledDate"] = current => {
	// Can not select days after today
	return current > dayjs().endOf("day")
}

const TimeRange: FC<any> = ({
	setFieldValue,
	showTime,
	defaultValue,
	label = "label.update_time_range",
	fieldName = "updateAt",
	startFieldName = "updatedAtBegin",
	endFieldName = "updatedAtEnd",
	dateFormat = "YYYY-MM-DD HH:mm:ss",
	noLable = false,
	format = "YYYY-MM-DD",
	...rest
}) => {
	const { formatMessage } = useLocale()

	const handleChange = (dates: Dayjs[]) => {
		if (dates) {
			const [start, end] = dates
			setFieldValue(startFieldName, start.startOf("day").format(dateFormat))
			setFieldValue(endFieldName, end.endOf("day").format(dateFormat))
		} else {
			setFieldValue(startFieldName, null)
			setFieldValue(endFieldName, null)
		}
	}

	return (
		<>
			<SFormItem name={fieldName} label={noLable ? undefined : `${formatMessage({ id: label })}:`}>
				<RangePicker
					defaultValue={defaultValue}
					showTime={showTime}
					format={format}
					disabledDate={disabledDate}
					{...rest}
					onChange={handleChange}
				/>
			</SFormItem>
			<SFormItem name={startFieldName} />
			<SFormItem name={endFieldName} />
		</>
	)
}

export default TimeRange
